---
title: Panduan Migrasi
---

# Panduan Migrasi

## Migrasi RainbowKit

### 2.x.x Perubahan signifikan

Ketergantungan peer [wagmi](https://wagmi.sh) dan [viem](https://viem.sh) telah mencapai `2.x.x` dengan perubahan mendasar.

Ikuti langkah-langkah di bawah ini untuk melakukan migrasi.

**1. Tingkatkan RainbowKit, `wagmi`, dan `viem` ke versi terbaru mereka**

```bash
npm i @rainbow-me/rainbowkit@2 wagmi@2 viem@2.x
```

**2. Pasang ketergantungan sejawat `@tanstack/react-query`**

Dengan Wagmi v2, [TanStack Query](https://tanstack.com/query/v5/docs/react/overview) sekarang menjadi ketergantungan peer yang diperlukan.

Instal dengan perintah berikut:

```bash
npm i @tanstack/react-query
```

**3. Tingkatkan konfigurasi RainbowKit dan Wagmi Anda**

```diff
  import '@rainbow-me/rainbowkit/styles.css'

+ import { QueryClient, QueryClientProvider } from '@tanstack/react-query'
- import { createPublicClient, http } from 'viem'
- import { WagmiConfig } from 'wagmi'
+ import { WagmiProvider, http } from 'wagmi'
- import { configureChains, createConfig } from 'wagmi'
  import { mainnet } from 'wagmi/chains'
  import { RainbowKitProvider } from '@rainbow-me/rainbowkit'
- import { getDefaultWallets, connectorsForWallets } from '@rainbow-me/rainbowkit'
+ import { getDefaultConfig } from '@rainbow-me/rainbowkit'

  /* getDefaultWallets is now optional */
- const { wallets } = getDefaultWallets({
-   appName: 'RainbowKit demo',
-   projectId: 'YOUR_PROJECT_ID',
-   chains,
- })

  /* connectorsForWallets is now optional */
- const connectors = connectorsForWallets([...wallets])

- const { chains, publicClient } = configureChains( 
-   [mainnet, sepolia], 
-   [publicProvider(), publicProvider()],
- )

- const config = createConfig({
-   autoConnect: true,
-   publicClient,
- })

  /* New API that includes Wagmi's createConfig and replaces getDefaultWallets and connectorsForWallets */
+ const config = getDefaultConfig({
+   appName: 'RainbowKit demo',
+   projectId: 'YOUR_PROJECT_ID',
+   chains: [mainnet],
+   transports: {
+     [mainnet.id]: http(),
+   },
+ })

+ const queryClient = new QueryClient()

  const App = () => {
    return (
-     <WagmiConfig config={config}>
+     <WagmiProvider config={config}>
+       <QueryClientProvider client={queryClient}>
-         <RainbowKitProvider chains={chains}>
+         <RainbowKitProvider>
            {/* Your App */}
          </RainbowKitProvider>
+       </QueryClientProvider>
-     </WagmiConfig>
+     </WagmiProvider>
    )
  }
```

**4. Periksa perubahan signifikan di `wagmi` dan `viem`**

Jika Anda menggunakan hooks `wagmi` dan aksi `viem` dalam dApp Anda, Anda perlu mengikuti panduan migrasi untuk v2:

- [Panduan Migrasi Wagmi v2](https://wagmi.sh/react/guides/migrate-from-v1-to-v2)
- [Perubahan Penting Viem v2](https://viem.sh/docs/migration-guide#2xx-breaking-changes)

#### Perubahan RainbowKit

**1. Peningkatan perilaku untuk dompet EIP-6963**

Dompet yang mendukung standar koneksi baru EIP-6963 (termasuk Rainbow, MetaMask, dan lainnya) kini akan otomatis muncul di bagian `Terpasang` selama pengalaman Sambung Dompet. Ini memastikan bahwa pengguna selalu dapat menemukan dompet favorit mereka dan terhubung ke dApps tanpa konflik atau tombol cadangan.

Pengembang tetap memiliki kontrol penuh atas Daftar Dompet Kustom untuk menekankan preferensi dompet untuk pengguna akhir. Dihimbau agar Anda terus menyertakan `injectedWallet` dan `walletConnectWallet` dalam daftar Anda untuk mendukung semua platform.

**2. Konfigurasi Wagmi dengan getDefaultConfig**

API baru ini menyederhanakan pengalaman konfigurasi dan menggantikan kebutuhan untuk menggunakan `createConfig` Wagmi secara langsung. Konfigurasi rantai disederhanakan, termasuk penyedia publik yang disimpulkan untuk `transports`.

Daftar dompet default akan secara otomatis disertakan, menghilangkan kebutuhan untuk menggunakan `getDefaultWallets` dan `connectorsForWallets`.

Anda dapat membuat Daftar Dompet Kustom dengan melewati konektor Dompet yang diimpor atau Kustom ke `wallets`. Menginisialisasi konektor dompet dan melewati `projectId` dan `chains` tidak lagi diperlukan.

```
const config = getDefaultConfig({
  appName: 'RainbowKit demo',
  projectId: 'YOUR_PROJECT_ID',
  chains: [mainnet],
  wallets: [rainbowWallet], /* optional custom wallet list */
  /* Wagmi createConfig options including `transports` are also accepted */
})
```

**3. RainbowKitProvider**

Anda tidak perlu lagi menambahkan `chains` ke `<RainbowKitProvider>`.

```diff
- <RainbowKitProvider chains={chains}>
+ <RainbowKitProvider>
```

**4. Rantai Kustom**

Tipe `Chain` telah berubah sesuai dengan Wagmi v2, dan terus mendukung metadata `iconUrl` dan `iconBackground` RainbowKit.

```diff
+ import { Chain } from '@rainbow-me/rainbowkit'

  const avalanche = {
    id: 43_114,
    name: 'Avalanche',
    iconUrl: 'https://s2.coinmarketcap.com/static/img/coins/64x64/5805.png',
    iconBackground: '#fff',
    nativeCurrency: { name: 'Avalanche', symbol: 'AVAX', decimals: 18 },
    rpcUrls: {
      default: { http: ['https://api.avax.network/ext/bc/C/rpc'] },
    },
    blockExplorers: {
      default: { name: 'SnowTrace', url: 'https://snowtrace.io' },
    },
    contracts: {
      multicall3: {
        address: '0xca11bde05977b3631167028862be2a173976ca11',
        blockCreated: 11_907_934,
      },
    },
  } as const satisfies Chain
```

Contoh dengan `getDefaultConfig`:

```diff
const config = getDefaultConfig({
+ chains: [
+   avalanche, /* custom chain */
+   {
+     ...mainnet,
+     iconBackground: '#000',
+     iconUrl: 'https://example.com/icons/ethereum.png',
+   }, /* metadata overides */
+ ],
});
```

Contoh dengan `createConfig`:

```diff
+ import { Chain } from '@rainbow-me/rainbowkit'
+ const chains: readonly [Chain, ...Chain[]] = [
+   {
+     ...mainnet,
+     iconBackground: '#000',
+     iconUrl: 'https://example.com/icons/ethereum.png',
+   },
+ ];
  const config = createConfig({
    chains,
    transports: {
      [mainnet.id]: http(),
    },
  })
```

**5. Dompet Kustom**

Konektor dompet RainbowKit telah mengalami perubahan besar untuk mendukung Wagmi v2. Referensi [dokumentasi terbaru](https://www.rainbowkit.com/docs/custom-wallets) dan contoh konektor dapat dilihat [di sini](https://github.com/rainbow-me/rainbowkit/blob/main/packages/rainbowkit/src/wallets/walletConnectors/rainbowWallet/rainbowWallet.ts) untuk meningkatkan Konector Dompet Kustom dalam dApp Anda.

Konektor dompet sekarang juga mendukung standar EIP-6963 dengan properti `rdns`. Pastikan ini terisi untuk mencegah referensi ganda ke dompet pendukung EIP-6963 dalam daftar dompet Anda.

### 1.x.x Perubahan signifikan

#### Diperbarui ke wagmi v1

Ketergantungan sejawat [wagmi](https://wagmi.sh) telah diperbarui ke `1.x.x`.

Ikuti langkah-langkah di bawah ini untuk melakukan migrasi.

**1. Tingkatkan RainbowKit dan `wagmi` ke versi terbaru mereka**

```bash
npm i @rainbow-me/rainbowkit@^1 wagmi@^1
```

**2. Pasang ketergantungan sejawat `viem`**

wagmi v1 memerlukan ketergantungan sejawat `viem`. Pasang dengan perintah berikut:

```bash
npm i viem
```

**3. Pastikan kompatibilitas bundler dan polyfill**

Referensi sampel konfigurasi [Next.js Webpack Config](https://github.com/rainbow-me/rainbowkit/blob/main/examples/with-next/next.config.js) kami untuk mendapatkan panduan konfigurasi proyek Anda.

Panduan kerangka kerja tambahan untuk Vite dan Remix tersedia [di sini](https://www.rainbowkit.com/docs/installation#additional-build-tooling-setup).

**4. Periksa perubahan signifikan di `wagmi`**

Jika Anda menggunakan hook `wagmi` dalam aplikasi Anda, Anda harus mengikuti panduan migrasi `wagmi` ke v1.

[Anda dapat melihat panduan migrasi mereka di sini](https://wagmi.sh/react/migration-guide).

### 0.12.x Perubahan signifikan

Ketergantungan sejawat wagmi telah diperbarui ke `0.12.x`.

RainbowKit telah mengadopsi konektor `WalletConnectLegacyConnector` di `wagmi` untuk mendukung WalletConnect v1 secara berkelanjutan. Dukungan untuk WalletConnect v2 dan `WalletConnectConnector` akan segera tersedia sebagai rilis patch, tanpa perubahan signifikan.

Dompet akan ditransisikan secara otomatis pada rilis di masa depan.

Setiap dApp sekarang harus menyediakan `projectId` [WalletConnect Cloud](https://cloud.walletconnect.com/) untuk mengaktifkan WalletConnect v2. Ini harus diselesaikan sebelum server jembatan WalletConnect v1 ditutup pada 28 Juni 2023. RainbowKit secara diam-diam lebih memilih v1 untuk semua dompet jika `projectId` tidak ditentukan.

Ikuti langkah-langkah di bawah ini untuk melakukan migrasi.

#### 1. Tingkatkan RainbowKit dan `wagmi` ke versi terbaru mereka

```bash
npm i @rainbow-me/rainbowkit@^0.12.0 wagmi@^0.12.0
```

#### 2. Berikan ID proyek Cloud WalletConnect

Setiap dApp yang bergantung pada WalletConnect sekarang perlu memperoleh `projectId` dari [WalletConnect Cloud](https://cloud.walletconnect.com/). Ini sepenuhnya gratis dan hanya membutuhkan beberapa menit.

Berikan `projectId` ke `getDefaultWallets` dan konektor dompet RainbowKit individu seperti berikut:

```ts
const projectId = 'YOUR_PROJECT_ID';

const { wallets } = getDefaultWallets({
  appName: 'My RainbowKit App',
  projectId,
  chains,
});

const connectors = connectorsForWallets([
  ...wallets,
  {
    groupName: 'Other',
    wallets: [
      readyWallet({ projectId, chains }),
      trustWallet({ projectId, chains }),
      ledgerWallet({ projectId, chains }),
    ],
  },
]);
```

### 0.11.x Perubahan signifikan

Ketergantungan sejawat wagmi telah diperbarui ke `0.11.x`.

Ikuti langkah-langkah di bawah ini untuk melakukan migrasi.

#### 1. Tingkatkan RainbowKit dan `wagmi` ke versi terbaru mereka

```bash
npm i @rainbow-me/rainbowkit@^0.11.0 wagmi@^0.11.0
```

#### 2. Periksa perubahan signifikan di `wagmi`

Jika Anda menggunakan hook `wagmi` dalam aplikasi Anda, Anda harus memeriksa apakah aplikasi Anda terpengaruh oleh perubahan signifikan di `wagmi`.

[Anda dapat melihat panduan migrasi mereka di sini](https://wagmi.sh/react/migration-guide#011x-breaking-changes).

### 0.10.x Perubahan signifikan

Ketergantungan sejawat wagmi telah diperbarui ke `0.10.x`.

Ikuti langkah-langkah di bawah ini untuk melakukan migrasi.

#### 1. Tingkatkan RainbowKit dan `wagmi` ke versi terbaru mereka

```bash
npm i @rainbow-me/rainbowkit@^0.10.0 wagmi@^0.10.0
```

#### 2. Periksa perubahan signifikan di `wagmi`

Jika Anda menggunakan hook `wagmi` dalam aplikasi Anda, Anda harus memeriksa apakah aplikasi Anda terpengaruh oleh perubahan signifikan di `wagmi`.

[Anda dapat melihat panduan migrasi mereka di sini](https://wagmi.sh/react/migration-guide#010x-breaking-changes).

### 0.9.x Perubahan signifikan

Ketergantungan sejawat wagmi telah diperbarui ke `0.9.x`.

Ikuti langkah-langkah di bawah ini untuk melakukan migrasi.

#### 1. Tingkatkan RainbowKit dan `wagmi` ke versi terbaru mereka

```bash
npm i @rainbow-me/rainbowkit@^0.9.0 wagmi@^0.9.0
```

#### 2. Periksa perubahan signifikan di `wagmi`

Jika Anda menggunakan hook `wagmi` dalam aplikasi Anda, Anda harus memeriksa apakah aplikasi Anda terpengaruh oleh perubahan signifikan di `wagmi`.

[Anda dapat melihat panduan migrasi mereka di sini](https://wagmi.sh/react/migration-guide#09x-breaking-changes).

### 0.8.x Perubahan signifikan

Ketergantungan sejawat wagmi telah diperbarui ke `0.8.x`.

Ikuti langkah-langkah di bawah ini untuk melakukan migrasi.

#### 1. Tingkatkan RainbowKit dan `wagmi` ke versi terbaru mereka

```bash
npm i @rainbow-me/rainbowkit@^0.8.0 wagmi@^0.8.0
```

#### 2. Periksa perubahan signifikan di `wagmi`

Jika Anda menggunakan hook `wagmi` dalam aplikasi Anda, Anda harus memeriksa apakah aplikasi Anda terpengaruh oleh perubahan signifikan di `wagmi`.

[Anda dapat melihat panduan migrasi mereka di sini](https://wagmi.sh/react/migration-guide#08x-breaking-changes).

### 0.7.x Perubahan signifikan

Jika Anda membuat daftar dompet kustom, Anda harus mengimpor setiap dompet secara terpisah untuk mengurangi ukuran bundel. Harap diperhatikan bahwa dompet tidak lagi menggunakan nama ruang `wallet`, semua dompet sekarang memiliki akhiran `Wallet`.

```diff
-import { connectorsForWallets, wallet } from '@rainbow-me/rainbowkit';
+import { connectorsForWallets } from '@rainbow-me/rainbowkit';
+import {
+  injectedWallet,
+  rainbowWallet,
+  metaMaskWallet,
+  coinbaseWallet,
+  walletConnectWallet,
+} from '@rainbow-me/rainbowkit/wallets';

const wallets = [
-  wallet.injected({ chains }),
-  wallet.rainbow({ chains }),
-  wallet.metaMask({ chains }),
-  wallet.coinbase({ chains, appName: 'My App' }),
-  wallet.walletConnect({ chains }),
+  injectedWallet({ chains }),
+  rainbowWallet({ chains }),
+  metaMaskWallet({ chains }),
+  coinbaseWallet({ chains, appName: 'My App' }),
+  walletConnectWallet({ chains }),
];
```

Harap juga dicatat bahwa lapisan kompatibilitas mundur Steakwallet telah dihapus. Omni harus digunakan sebagai gantinya.

```diff
-import { wallet } from '@rainbow-me/rainbowkit';
+import { omniWallet } from '@rainbow-me/rainbowkit/wallets';

const wallets = [
-  wallet.steak({ chains }),
+  omniWallet({ chains }),
];
```

### 0.4.x Perubahan signifikan

RainbowKit telah memperbarui ketergantungan sejawat `wagmi` ke `0.5.x`.

Ikuti langkah-langkah di bawah ini untuk melakukan migrasi.

#### 1. Tingkatkan ketergantungan

Tingkatkan RainbowKit dan wagmi ke versi terbaru mereka

```bash
npm i @rainbow-me/rainbowkit@^0.4.0 wagmi@^0.5.0
```

#### 2. Periksa perubahan signifikan di `wagmi`

Jika Anda menggunakan hook `wagmi` dalam aplikasi Anda, Anda harus memeriksa apakah aplikasi Anda terpengaruh oleh perubahan signifikan di `wagmi`.

[Anda dapat melihat panduan migrasi mereka di sini](https://wagmi.sh/react/migration-guide#05x-breaking-changes).

### 0.3.x Perubahan signifikan

Parameter `chainId` telah dihapus dari `createConnector` pada tipe `Wallet`.

**Perhatikan bahwa semua dompet bawaan menggunakan API baru. Kebanyakan konsumen tidak akan terpengaruh. Perubahan ini hanya berdampak pada konsumen yang telah membuat/menggunakan [dompet kustom](/docs/custom-wallets).**

Jika Anda sebelumnya mendapatkan URL RPC dari `chainId` di `createConnector`, Anda sekarang dapat menghapus logika tersebut karena `wagmi` sekarang menangani URL RPC secara internal ketika digunakan dengan `configureChains`.

```diff
import { connectorsForWallets, wallet, Chain, Wallet } from '@rainbow-me/rainbowkit';
import { chain, configureChains } from 'wagmi';
import { alchemyProvider } from 'wagmi/providers/alchemy';
import { publicProvider } from 'wagmi/providers/public';
import { WalletConnectConnector } from 'wagmi/connectors/walletConnect';

export interface MyWalletOptions {
  chains: Chain[];
}

-const chains = [chain.mainnet]
+const { chains } = configureChains(
+  [chain.mainnet],
+  [
+    alchemyProvider({ alchemyId: process.env.ALCHEMY_ID }),
+    publicProvider(),
+  ]
+);

export const rainbow = ({ chains }: MyWalletOptions): Wallet => ({
  ...
- createConnector: ({ chainId }) => {
+ createConnector: () => {
-   const rpc = chains.reduce(
-     (rpcUrlMap, chain) => ({
-       ...rpcUrlMap,
-       [chainId]: chain.rpcUrls.default,
-     }),
-     {}
-   );
    const connector = new WalletConnectConnector({
      chains,
      options: {
        qrcode: false,
-       rpc,
      },
    });
  }
  ...
}

const connectors = connectorsForWallets([
  {
    groupName: 'Recommended',
    wallets: [
      rainbow({ chains }),
    ],
  },
]);
```

### 0.2.x Perubahan signifikan

RainbowKit telah memperbarui ketergantungan sejawat `wagmi` ke `^0.4`.

Ikuti langkah-langkah di bawah ini untuk melakukan migrasi.

#### 1. Tingkatkan ketergantungan

Tingkatkan RainbowKit dan wagmi ke versi terbaru mereka

```bash
npm i @rainbow-me/rainbowkit@^0.2.0 wagmi@^0.4.2
```

#### 2. Gantikan impor configureChains

Impor `configureChains` dari wagmi bukan dari RainbowKit:

```diff
- import { configureChains } from '@rainbow-me/rainbowkit';
+ import { configureChains } from 'wagmi';
```

#### 3. Migrasikan penyedia

RainbowKit tidak lagi mengekspor API `apiProvider`. Gantilah dengan penyedia yang diinginkan dari wagmi.

```diff
- import { apiProvider } from '@rainbow-me/rainbowkit';
```

#### Alchemy

Impor `alchemyProvider` dari `wagmi/providers/alchemy`.

```diff
+ import { alchemyProvider } from 'wagmi/providers/alchemy';

const { chains, provider } = configureChains(
  [chain.mainnet, chain.polygon, chain.optimism, chain.arbitrum],
- [apiProvider.alchemy(process.env.ALCHEMY_ID)]
+ [alchemyProvider({ alchemyId: process.env.ALCHEMY_ID })]
);
```

#### Infura

Impor `infuraProvider` dari `wagmi/providers/infura`.

```diff
+import { infuraProvider } from 'wagmi/providers/infura';

const { chains, provider } = configureChains(
  [chain.mainnet, chain.polygon, chain.optimism, chain.arbitrum],
- [apiProvider.infura(process.env.INFURA_ID)]
+ [infuraProvider({ infuraId: process.env.INFURA_ID })]
);
```

#### JSON RPC

Impor `jsonRpcProvider` dari `wagmi/providers/jsonRpc`.

```diff
+ import { jsonRpcProvider } from 'wagmi/providers/jsonRpc';

const { chains, provider } = configureChains(
  [chain.mainnet, chain.polygon],
  [
-   apiProvider.jsonRpc(chain => ({
-     rpcUrl: `https://${chain.id}.example.com`,
-   })),
+   jsonRpcProvider({
+     rpc: chain => ({
+       http: `https://${chain.id}.example.com`,
+     }),
+   }),
  ]
);
```

#### Penyedia publik

Impor `publicProvider` dari `wagmi/providers/public`.

```diff
+ import { publicProvider } from 'wagmi/providers/public';

const { chains, provider } = configureChains(
  [chain.mainnet, chain.polygon],
- [apiProvider.fallback()]
+ [publicProvider()]
);
```

#### 4. Ganti nama penyedia wagmi

Ganti nama `WagmiProvider` menjadi `WagmiConfig`.

```diff
import {
- WagmiProvider
+ WagmiConfig
} from 'wagmi'

const App = () => {
  return (
-   <WagmiProvider client={wagmiClient}>...</WagmiProvider>
+   <WagmiConfig client={wagmiClient}>...</WagmiConfig>
  );
};
```

Dan Anda sudah selesai! 🌈
